<template>
  <div class="task-item" @click="showDrawer">
    <a-checkbox :checked="checked" @click.stop="toggleChecked(Number(this.item.prefix))" style="align-self: center"></a-checkbox>
    <a-typography-text
        :delete="checked"
        :ellipsis="true"
        class="task-item-text"
        v-model:content="getDescription"
        style="align-self: center; font-size: 16px; height: 55px; line-height: 55px"
    />
    <a-row style="flex-wrap: nowrap">
      <a-space>
        <div class="tag-icon">
          <a-tag :visible="getPriorityVisible" :style="{color: getColorByPriority}">
            <bell-filled/>
          </a-tag>
        </div>
        <div class="tag-icon-age">
          <a-tag :visible="item.age !== ''" style="color: gray">{{ item.age }}</a-tag>
        </div>
        <div class="tag-icon">
          <a-tag class="tag-icon" :visible="item.star !== ''" style="color: orange">
            <star-filled/>
          </a-tag>
        </div>
      </a-space>
    </a-row>
    <a-drawer
        v-model:visible="drawerVisible"
        :closable="false"
        :mask-style="{opacity: 0, animation: 'none'}"
        :body-style="{background: 'rgba(18,26,77,0.05)'}"
        placement="right"
        :maskClosable="true"
        :destroy-on-close="true"
        width="50%"
        @close="resetDrawer"
    >
      <a-textarea
          style="min-height: 50%; max-height: 75%; animation: none"
          :defaultValue="getContent"
          v-model:value="inputValue"
      />
      <div>
        <div class="option-container">
          <a-typography-text class="item-label">
            优先级
          </a-typography-text>
          <span class="colon-span">:</span>
          <a-radio-group v-model:value="selectValue" button-style="solid">
            <a-radio-button value="1">一般</a-radio-button>
            <a-radio-button value="2">重要</a-radio-button>
            <a-radio-button value="3">紧急</a-radio-button>
          </a-radio-group>
        </div>
        <div class="option-container">
          <a-typography-text class="item-label">
            星标任务
          </a-typography-text>
          <span class="colon-span">:</span>
          <div style="align-self: center">
            <a-switch
                v-model:checked="switchChecked"
            />
          </div>
        </div>
      </div>
      <a-divider />
      <div style="display: flex; flex-direction: row; align-content: center; width: 100%; justify-content: space-between">
        <a-space>
          <a-button type="dashed" @click="resetDrawer();resetMessage()" danger>重置</a-button>
          <a-button @click="closeDrawer">取消</a-button>
          <a-button type="primary" @click="updateTask">确认</a-button>
        </a-space>
        <div style="display: flex; align-self: flex-end">
          <a-button @click="deleteTask" danger>删除任务</a-button>
        </div>
      </div>
    </a-drawer>
  </div>
</template>

<script>
import { BellFilled, StarFilled } from '@ant-design/icons-vue';
import { ref } from 'vue';
import taskCommend from "../task_manager/commend";
import { message } from 'ant-design-vue';

export default {
  setup() {
    const checked = ref(false);
    const drawerVisible = ref(false);
    const inputValue = ref('');
    const labelCol = {
      style: {
        width: '80px'
      }
    };
    const wrapperCol = {
      span: 14,
    };
    const selectValue = ref("");
    const switchChecked = ref(false)

    return {
      checked,
      drawerVisible,
      inputValue,
      labelCol,
      wrapperCol,
      selectValue,
      switchChecked
    }
  },
  mounted() {
    this.checked = this.item.isComplete;
    this.inputValue = this.getContent;
    this.selectValue = String(this.getPriority());
    this.switchChecked = this.item.star !== '';
    this.drawerVisible = this.openDrawer;
  },
  methods: {
    getPriority() {
      const reg1 = /^[.\s\S]+ \(!\)$/;
      const reg2 = /^[.\s\S]+ \(!!\)$/;
      if (reg1.test(this.item.message)) {
        return 2;
      }
      if (reg2.test(this.item.message)) {
        return 3;
      }
      return 1;
    },
    toggleChecked(key) {
      this.checked = !this.checked;
      const input = [key];
      const flag = {check: true};
      this.sendCommendAndUpdate(input, flag);
    },
    showDrawer() {
      this.drawerVisible = true;
    },
    resetDrawer(e) {
      this.inputValue = this.getContent;
      this.selectValue = String(this.getPriority());
      this.switchChecked = this.item.star !== '';
    },
    resetMessage() {
      message.success('重置成功！', 1);
    },
    closeDrawer() {
      this.resetDrawer();
      this.drawerVisible = false;
    },
    sendCommendAndUpdate(input, flag) {
      taskCommend(input, flag);
      this.$store.dispatch('panes/getTaskData');
    },
    updateTask() {
      if ((this.inputValue === this.getContent
              && this.selectValue === this.getPriority().toString()
              && this.switchChecked === (this.item.star !== ''))
          || this.inputValue === ""
      ) {
        this.closeDrawer();
        return;
      }
      const key = Number(this.item.prefix);
      const input = [key, this.inputValue, this.selectValue, this.switchChecked];
      const flag = {edit: true};
      this.sendCommendAndUpdate(input, flag);
      this.closeDrawer();
      message.success('修改任务成功！');
    },
    deleteTask() {
      const key = Number(this.item.prefix);
      const input = [key];
      const flag = {delete: true};
      this.sendCommendAndUpdate(input, flag);
      this.closeDrawer();
      message.success('删除任务成功！');
    }
  },
  components: {
    BellFilled,
    StarFilled
  },
  props: {
    item: Object,
    openDrawer: Boolean
  },
  computed: {
    getDescription() {
      return `${this.item.prefix} ${this.item.message.replace(/ \(!+\)/, "")}`;
    },
    getContent() {
      return `${this.item.message.replace(/ \(!+\)/, "")}`;
    },
    getColorByPriority() {
      const priority = this.getPriority();
      if (priority === 2) {
        return 'orange';
      }
      if (priority === 3) {
        return 'red';
      }
      return '';
    },
    getPriorityVisible() {
      const priority = this.getPriority();
      return priority !== 1;
    },
  }
}
</script>
